<script lang="ts" setup>
import {todayData} from '@/api/visualization'

interface listType {
    price: number,
    title: string
}

let list = $ref<listType[]>()
let titleMap: { [key: string]: string } = {
    allAmount: '今日成交金额',
    payNum: '支付订单数',
    registerNum: '注册用户数',
    payRate: '支付成功率'
}

onMounted(async () => {
    const res = await todayData()
    if (res.code === 0) {
        // 接口返回的数据转成echarts要求的数据格式
        list = Object.keys(res.data).map((key) => {
            return {
                title: titleMap[key],
                price: (res.data[key] && res.data[key] !== 'NaN') ? res.data[key] : 0
            }
        })
    }
})

</script>

<template>
    <div h-56 w-96 flex="~ col" bg="[url(@/assets/image/border/TodayCurrentDataBorder.png)] no-repeat center cover">
        <div p="x-8 t-4" text="#17caf0 5.5" font="bold">今日实时数据</div>
        <div grid="~ rows-2 cols-2" gap="x-8 y-4">
            <div flex="~ col" v-for="item in list">
        <span text="8 #00ffc3 center">
          {{ item.price }}
        </span>
                <span text="4 white center">{{ item.title }}</span>
            </div>
        </div>
    </div>
</template>